<template>
  <div id="holidayList">
    <el-row style="text-align: left;padding: 20px;">
      <el-button type="primary" @click="saveHoliday(1)">添加节假日</el-button>
    </el-row>
    <el-row>
      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <!--<el-table-column prop="name" label="名称" width="180">-->
        <!--</el-table-column>-->
        <el-table-column prop="date" label="日期时间">
        </el-table-column>
        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button type="text" size='mini' @click="saveHoliday(2,scope.row)">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除">
          <template slot-scope="scope">
            <el-button type="text" size='mini' @click="deleteHoliday(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="text-align: right;padding-right: 40px;">

        <el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber"
                       :page-size="pageSize" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
      <el-dialog :title="title" :visible.sync="dialogVisible" size="tiny">
        <el-form :label-position="labelPosition" label-width="80px" :model="form">
          <!--<el-form-item label="名称">-->
            <!--<el-input v-model="form.name"></el-input>-->
          <!--</el-form-item>-->

            <div class="block" style='text-align:left;margin-bottom: 20px'>
              <span class="demonstration" style="display:inline-block;width:80px;text-align: right;padding: 11px;">日期</span>
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions0">
              </el-date-picker>
            </div>

          <el-row>
            <el-button type="primary" @click="holidayAjax">确定</el-button>
            <el-button type="primary" @click="dialogVisible = false">取消</el-button>
          </el-row>

        </el-form>

      </el-dialog>
    </el-row>
  </div>
</template>

<script>
  import dateformat from 'dateformat'
  export default {
    data () {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        pageSize: 10,
        pageNumber: 1,
        total: 1,
        dialogVisible: false,
        labelPosition: 'right',
        title: '添加节假日',
        loading:false,
        form: {
//          name: '',
          date: ''
        },
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      }
    },
    created(){
      this. getHolidayList()
    },
    methods: {
      getHolidayList() {
        this.loading = true;
        let params={
          pageSize:this.pageSize,
          pageNumber:this.pageNumber
        }
        this.$api.getHolidayList(params).then(res =>{
          if(res.code == '000000'){
            console.log(res.data);
            this.loading = false;
            this.tableData = res.data.list;
            this.total = res.data.totalRow;
            this.tableData.forEach(item =>{
              if(item.date){
                let date =new Date(item.date);
                item.date = dateformat(date,'yyyy-mm-dd')
              }
            })
            this.$message({
              type: 'success',
              message: '获取节假日列表成功'
            })
          }
        })
      },
      holidayAjax(){
        this.dialogVisible = false;
        this.form.date = Date.parse(this.form.date)
        this.$api.saveHoliday(this.form).then(res =>{
          if(res.code == '000000'){
            console.log(res.data);
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getHolidayList()
          }
        })
      },
      saveHoliday(mes,row) {
        if (mes == 1) {
          this.title = '添加节假日';
          this.dialogVisible = true;
           this.form.date = '';
            if(this.form.id){
              delete this.form.id
            }
        }
        if (mes == 2) {
          this.title = '修改节假日';
          this.dialogVisible = true;
          this.form.id = row.id;
          this.form.date = row.date
        }
      },
      deleteHoliday(id) {
        this.$confirm('此操作将永久删除该节假日, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deleteHoliday(id).then(res =>{
            if(res.code == '000000'){
              console.log(res.data);
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.getHolidayList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleChange(val) {
        this.pageNumber = val;
        this.getHolidayList()
      }
    }


  }
</script>

<style lang="less">
  #holidayList {
    th {
      text-align: center;
    }
  }
</style>
